﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>收发查看</title>
    <script src="/day.js"></script>
    <script src="/axios.min.js"></script>
    <script src="/echarts.min.js"></script>
    <script src="/signalr.min.js"></script>
</head>

<body>
    <div id="tcpContainer" style="text-align:center;margin:20px auto;width:80%;height: 300px;"></div>
    <div id="connContainer" style="text-align:center;margin:20px auto;width:80%;height: 300px;"></div>
    <script type="text/javascript">
        var tcpDom = document.getElementById("tcpContainer");
        var connDom = document.getElementById("connContainer");
        var tcpChart = echarts.init(tcpDom);
        var connChart = echarts.init(connDom);
        var sendData=[];
        var receiveData=[];
        var onlineData=[];
        var offlineData=[];
        var timeData=[];
        var tcpOption = {
            title: {
                text: 'TCP收发数'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: true
                }
            },
            legend: {
                data:['发送总次数','接收总次数']
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: timeData
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: true
                }
            },
            series: [{
                name: '发送总次数',
                type: 'line',
                color: "blue",
                data: sendData
            },{
                name: '接收总次数',
                type: 'line',
                color: "red",
                data: receiveData
            }]
        };
        var connOption = {
            title: {
                text: 'TCP连接数'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: true
                }
            },
            legend: {
                data:['tcp在线数','tcp离线数']
            },
            xAxis: {
                type: 'category', 
                boundaryGap: false,
                data: timeData
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: true
                }
            },
            series: [{
                name: 'tcp在线数',
                type: 'line',
                color: "blue",
                data: onlineData
            },{
                name: 'tcp离线数',
                type: 'line',
                color: "red",
                data: offlineData
            }]
        };
        //setInterval(function () {
        //    axios.post('/JT808WebApi/QueryReport')
        //    .then((response) => {
        //            if (response.data) {
        //                if(sendData.length>16){
        //                    sendData.shift();
        //                    receiveData.shift();
        //                    onlineData.shift();
        //                    offlineData.shift();
        //                    timeData.shift();
        //                }
        //                //console.log(response.data);
        //                timeData.push(dayjs(response.data.currentDate).format('HH:mm:ss'));
        //                sendData.push(response.data.sendTotalCount);
        //                receiveData.push(response.data.receiveTotalCount);
        //                onlineData.push(response.data.onlineConnections);
        //                offlineData.push(response.data.offlineConnections);
        //                tcpChart.setOption({
        //                    series: [{
        //                        data: sendData
        //                    },{
        //                        data: receiveData
        //                    }],
        //                    xAxis:[{
        //                        data: timeData
        //                    }]
        //                });
        //                connChart.setOption({
        //                    series: [{
        //                        data: onlineData
        //                    },{
        //                        data: offlineData
        //                    }],
        //                    xAxis:[{
        //                        data: timeData
        //                    }]
        //                });
        //            } else {
        //                alert("没有数据");
        //            }
        //        })
        //        .catch((error) => {
        //            console.log(error); 
        //        });
        //}, 1000);
        this.signalrInfo = {};
        //todo:根据底图动态切换皮肤 第二版再搞
        this.signalrInfo.conn = new signalR.HubConnectionBuilder()
            .withUrl("/ReportHub")
            .withAutomaticReconnect({
                nextRetryDelayInMilliseconds: retryContext => {
                    return 8000;
                }
            })
            .build();
        this.signalrInfo.conn.on("ReceiveMessage", (key, message) => {
            message = JSON.parse(message);
            //console.debug("ReceiveMessage",key, message);
            if (sendData.length > 16) {
                sendData.shift();
                receiveData.shift();
                onlineData.shift();
                offlineData.shift();
                timeData.shift();
            }
            timeData.push(dayjs(message.CurrentDate).format('HH:mm:ss'));
            sendData.push(message.SendTotalCount);
            receiveData.push(message.ReceiveTotalCount);
            onlineData.push(message.OnlineConnections);
            offlineData.push(message.OfflineConnections);
            tcpChart.setOption({
                series: [{
                    data: sendData
                }, {
                    data: receiveData
                }],
                xAxis: [{
                    data: timeData
                }]
            });
            connChart.setOption({
                series: [{
                    data: onlineData
                }, {
                    data: offlineData
                }],
                xAxis: [{
                    data: timeData
                }]
            });
        });
        this.signalrInfo.conn.start().catch(err => console.error(err));
        if (tcpOption && typeof tcpOption === "object") {
            tcpChart.setOption(tcpOption, true);
        }
        if (connOption && typeof connOption === "object") {
            connChart.setOption(connOption, true);
        }
    </script>
</body>

</html>